<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>实时预览</title>
    <style type="text/css">
        html{width: 100%;height: 95%;}
    </style>
    <!-- 如果要支持ie8，引入下面的代码 -->
    <link rel="stylesheet" href="/video/video-js.css">
    <script src="/video/videojs-ie8.js"></script>
</head>
<script src="/jquery.min.js"></script>
<script type="text/javascript">
    var devId = location.hash.substr(1)
    $(function(){
        var height = $("body").height();
        var width = $("body").width();
        $.ajax({
            url:"/dev/getRTMPUrlAndStartTranscode",
            data:{id:devId},
            anysc:false,
            success:function(res){
                var data = res;
                console.log(data.rtmpUrl)
                if(data && data.rtmpUrl){
                    var str = "<video id='my-video1' class='video-js vjs-big-play-centered' controls preload='auto' width='"+width+"' height='"+height+"' poster='' data-setup='{}'>" +
                        "<source type='rtmp/flv'>" +
                        "<p class='vjs-no-js'>To view this video please enable JavaScript, and consider upgrading to a web browser that" +
                        "<a href='http://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>" +
                        "</p>" +
                        "</video>";
                    $("body").append(str);
                    var videoUrl = data.rtmpUrl;
                    player = videojs('my-video1');
                    videojs('my-video1', {
                        controls: true,
                        autoplay: true,
                        preload: 'auto'
                    }, function () {
                        player.src(videoUrl);
                        player.load(videoUrl);
                        player.play();
                        this.on('ended', function() {
                            videojs.log('Awww...over so soon?!');
                        });
                    });

                }else return top.layer.msg(data.msg);
            }
        });
    })
</script>
<body style="height: 98%;width: 98%">
<script src="/video/video.js"></script>
<script>
    videojs.options.flash.swf = "/video/video-js.swf";
</script>
</body>
</html>